<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>point-hit</title>
    <style>
        p{
            position: absolute;
            
        }
    </style>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="background:#000;">
       your browser not support canvas!
   </canvas>
   <p>没撞上</p>
   <script src="../js/utils.js"></script>
   <script src="../js/ball.js"></script>
   <script>
       window.onload = function(){
           var canvas = document.getElementById('canvas'),
               context = canvas.getContext('2d'),
               log = document.getElementById('log'),
               mouse = utils.captureMouse(canvas),
               ball = new Ball();
               
           ball.x = canvas.width/2;
           ball.y = canvas.height/2;
           
           var ballBounds = ball.getBounds();
           
           ball.draw(context);
           
           canvas.addEventListener('mousemove', function(e){
              var dx = Math.abs(mouse.x - ball.x);
              var dy = Math.abs(mouse.y - ball.y); 
              var distance = Math.sqrt(dx*dx + dy*dy);
               console.log(distance);
               if(distance < ball.radius){
                   log.value = '碰着了';
               }else{
                   log.value = '';
               }
               /*if(utils.containsPoint(ballBounds, mouse.x, mouse.y)){
                   log.value = '碰着了';
               }else{
                   log.value = '';
               }*/
           }, false);
               
               
 
       }
   
    </script>
    
</body>
</html>